import React from 'react';
import ReactEcharts from 'echarts-for-react';
import jQuery from "jquery";
import Moment from "moment";

const globalConfig = require("../../js/globalConfig");

const titles = ["电机", "卷筒左轴承座", "卷筒右轴承座", "导向轮"];
const colors = ['#5470c6', '#91cc75', '#fac858', '#ee6666']

class SubVib extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            url: this.props.flag ? globalConfig.url + "/getMainVibration" : globalConfig.url + "/getSubVibration",
            yData: new Array(20).fill(0),
            xData: new Array(20).fill(0),
            isMount: true,
            option: {
                title: {
                    text: titles[this.props.num],
                    left: "center",
                    textStyle: {
                        fontSize: 16,
                        fontWeight: "normal"
                    }
                },
                tooltip: {},
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        name: "时间",
                    }
                ],
                yAxis: [
                    {
                        name: "振动(μm)",
                        type: 'value',
                    }
                ],
                series: [
                    {
                        symbol: 'circle',
                        name: titles[this.props.num],
                        type: "line",
                        itemStyle: {
                            normal: {
                                color: colors[this.props.num],
                                lineStyle: {
                                    color: colors[this.props.num]
                                }
                            }
                        },
                    }
                ],
                grid: {
                    top: 50,
                    left: 45,
                    right: 45,
                    bottom: 25
                }
            },
        }
    }



    componentDidMount() {
        const instance = this.echartsReact.getEchartsInstance();
        this.timerID = setInterval(() => {
            var this_ = this;
            if (this.state.isMount) {
                jQuery.ajax({
                    url: this_.state.url,
                    dataType: "JSON",
                    type: "POST",
                    data: {},
                    success: function (result) {
                        const newYData = this_.state.yData.slice();

                        const newXData = this_.state.xData.slice();
                        newYData.push(Math.random());
                        newXData.push(Moment(new Date()).format("HH:mm:ss"));
                        newYData.shift();
                        newXData.shift();
                        this_.setState({
                            yData: newYData,
                            xData: newXData,
                        });


                        instance.setOption({
                            xAxis: { data: this_.state.xData },
                            series: [
                                { data: this_.state.yData },
                            ]
                        });
                    }
                });
            }
        }, 500);
    }
    componentWillUnmount() {
        this.setState({ isMount: false });
        clearInterval(this.timerID);
    }
    render() {
        return (
            <ReactEcharts ref={e => { this.echartsReact = e; }} option={this.state.option} style={{ height: "100%", width: "100%" }} opts={{ renderer: 'svg' }} theme="dark"/>
        );
    }
}

export default SubVib;